<template>
    <div class="kanban-home-container">
        <!-- 占位符 -->
        <div class="main-header">
            <div class="main-header-left">
                <span class="year">{{
                    formateTimeStamp(new Date().getTime())
                }}</span>
                <span id="nowtime" class="nowtime"></span>
            </div>
            <div
                class="main-header-right"
                title="返回主页"
                @click="back($router)"
            >
                <a-icon type="login" style="font-size: 30px; color: #76abe8" />
            </div>
        </div>
        <!-- 内容 -->
        <div class="main-content">
            <div class="main-content-left">
                <Left />
            </div>
            <div class="main-content-center">
                <CenterPage />
            </div>
            <div class="main-content-right">
                <Right />
            </div>
        </div>
    </div>
</template>

<script>
import { back, getNowTime, formateTimeStamp } from "@/utils";
import Left from "./components/Left/Left.vue";
import CenterPage from "./components/Center/Center.vue";
import Right from "./components/Right/Right.vue";
export default {
    components: {
        Left,
        CenterPage,
        Right,
    },
    data() {
        return {
            timer: null,
        };
    },
    beforeDestroy() {
        if (this.timer) clearInterval(this.timer);
    },
    mounted() {
        if (this.timer) clearInterval(this.timer);
        this.timer = setInterval(() => {
            getNowTime("nowtime");
        }, 20);
    },
    methods: {
        back,
        formateTimeStamp,
        getNowTime,
    },
};
</script>

<style lang="less" scoped>
@mainHeight: 100vh;
@headerHeight: 7vh;
.kanban-home-container {
    width: 100%;
    height: @mainHeight;
    background: url("../../assets/kanban/bg/kanban-home.png") no-repeat;
    background-size: 100% 100%;
    overflow: hidden;

    .main-header {
        height: @headerHeight;
        position: relative;

        &-right {
            position: absolute;
            right: 10%;
            top: 16px;
            &:hover {
                cursor: pointer;
            }
        }

        &-left {
            position: absolute;
            left: 3%;
            top: 14px;
            color: #76abe8;
            font-size: 0.26rem;
            .year {
                padding-right: 10px;
            }
        }
    }

    .main-content {
        height: calc(@mainHeight - @headerHeight);
        padding-top: 36px;
        display: flex;
        padding-left: 16px;
        padding-right: 16px;

        &-left {
            width: 30%;
        }
        &-center {
            width: 40%;
            margin-left: 10px;
            margin-right: 10px;
        }
        &-right {
            width: 30%;
        }
    }
}
</style>
